<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="请输入部门编号或名称:">
        <el-input placeholder="请输入信息" v-model="keyWord"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()" v-model="deptselbtn" v-if="deptselshow">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="addDept()" v-model="deptaddbtn" v-if="deptaddshow">增加</el-button>
      </el-form-item>
    </el-form>
    

    <el-table
      ref="multipleTable"
      :data="deptlist"
      tooltip-effect="dark"
      style="width: 460px; margin: 0px auto"
     
    >
  

      <el-table-column prop="dept_code" label="部门编号" width="120" align="center">
      </el-table-column>
      <el-table-column prop="dept_name" label="部门名称" width="120" align="center">
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)" v-model="deptdelbtn" v-if="deptdelshow"
            >删除</el-button
          >
          <el-button size="mini" type="success" @click="updDept(scope.row)" v-model="deptupdbtn" v-if="deptupdshow">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 增加模态框开始 -->
    <el-dialog title="部门增加" :visible.sync="addDialogFormVisible">
      <el-form>
        <el-form-item label="部门编号" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.dept_code"></el-input>
        </el-form-item>
        <el-form-item label="部门名称" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.dept_name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveDept()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 增加模态框结束 -->

    <!-- 修改模态框开始 -->
    <el-dialog title="部门修改" :visible.sync="updDialogFormVisible">
      <el-form>
        <el-form-item label="部门编号" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.dept_code"></el-input>
        </el-form-item>
        <el-form-item label="部门名称" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.dept_name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveUpd()">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改模态框结束 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      deptselbtn:'19',
      deptaddbtn:'17',
      deptupdbtn:'18',
      deptdelbtn:'20',
      deptselshow:false,
      deptaddshow:false,
      deptupdshow:false,
      deptdelshow:false,
      keyWord: "",
      deptlist: [],
      addDialogFormVisible: false,
      addForm: {
        dept_code: "",
        dept_name: "",
      },
      formLabelWidth: "150px",
      updDialogFormVisible: false,
      id:''
    };
  },
  methods: {
    loadData() {
      this.$axios
        .get("/depts", {
          params: {
            keyWord: this.keyWord,
          },
        })
        .then((res) => {
          this.deptlist = res.data.data;
          setTimeout(() => {
      //设置默认选中项
        this.login();
      }, 0);
        })
        .catch((error) => {});
    },

    handleDelete(a) {
      let dept_id = a.dept_id;
      this.$axios
        .delete("/depts/" + dept_id)
        .then((res) => {
          alert(res.data.message);
          this.loadData();
        })
        .catch((error) => {});
    },

    addDept() {
      //让模态框展示出来
      this.addDialogFormVisible = true;
      //向服务器要所有的部门信息，加载到下拉菜单中
      this.$axios
        .get("/depts")
        .then((res) => {
          this.deptList = res.data.data;
        })
        .catch((error) => {});
    },
    saveDept() {
      this.$axios
        .post("/depts", this.addForm)
        .then((res) => {
          alert(res.data.message);
          this.addDialogFormVisible = false;
          this.addForm.dept_code = "";
          this.addForm.dept_name = "";
          this.loadData();
        })
        .catch((error) => {});
    },
    
    updDept(item) {
      this.updDialogFormVisible = true;
      this.id = item.dept_id;
      this.$axios.get("/depts/upd/" + this.id)
        .then((res) => {
          this.addForm.dept_code = res.data.data.dept_code;
          this.addForm.dept_name = res.data.data.dept_name;
        })
        .catch((error) => {});
    },
    saveUpd() {
      this.updDialogFormVisible = true;
      this.$axios
        .put("/depts", {
          dept_id: this.id,
          dept_code: this.addForm.dept_code,
          dept_name: this.addForm.dept_name,
        })
        .then((res) => {
          alert(res.data.message);
          this.updDialogFormVisible = false;
          this.addForm.dept_code = "";
          this.addForm.dept_name = "";
          this.loadData();
        });
    },

    search() {
      this.loadData();
    },
    login(){
      var l = sessionStorage.getItem("permission_list");
      var list = l.split(',');
      list.forEach((item)=>{
        if(item == this.deptselbtn){
          this.deptselshow = true;
        }
        if(item == this.deptaddbtn){
          this.deptaddshow = true;
        }
        if(item == this.deptupdbtn){
          this.deptupdshow = true;
        }
        if(item == this.deptdelbtn){
          this.deptdelshow = true;
        }
      })
    }

  },
  mounted() {
    this.loadData();
  },
};
</script>